 import react,{ ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { AtButton,AtTabBar,AtModal, AtModalHeader, AtModalContent, AtModalAction ,AtTextarea} from 'taro-ui';
import { View, Image, Text,Button } from '@tarojs/components'
import classnames from 'classnames'
import { connect } from '@tarojs/redux'
// import NavTabBar from '../../components/Nav'
// import CLoading from '../../components/CLoading'
// import NavBar from 'taro-navigationbar';
import CMusic from '../../components/CMusic'
import NavBarUg from '../../components/Navug'
import { getRecommendPlayList,  getSongInfo, getPlayListDetail, updatePlayStatus ,updateVoteState} from '../../actions/song'
   
 import {submitDisagreeReason} from "../../actions/vote"
import { injectPlaySong } from '../../utils/decorators'
// import { formatCount } from '../../utils/common'
import { songType } from '../../constants/commonType'
import './index.scss'
let currItemId
const styles = {
  btnAgreeStyle:{ 
     color:'#ffffff',
     backgroundColor:'Red'
  },
  btnAgreeStyleB:{ 
    color:'#000000',
    backgroundColor:'#f2f2f2'
 },

 btnGiveUpStyle:{ 
  color:'#ffffff',
  backgroundColor:'Red'
},
btnGiveUpStyleB:{ 
 color:'#000000',
 backgroundColor:'#f2f2f2'
},

  btnDisAgreeStyle:{
    color:'#ffffff',
    backgroundColor:'Red'
 },
  btnDisAgreeStyleB:{
     color:'#000000',
     backgroundColor:'#f2f2f2'
  },
  containerStyle: {
    flex: 1
  },
  listViewStyle: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  buttonContainerStyle: {
    alignSelf: 'flex-end'
  }
}

type PageStateProps = {
  song: songType,
}
type PageOwnProps = {
  submitDisagreeReason:(id,userId,disagreeReason,isAgree) => any,
}
type PageDispatchProps = {
  getPlayListDetail: (object) => any,
  getSongInfo: (object) => any,
  updatePlayStatus: (object) => any,
  updateVoteState:(voteStatus,userId,itemId)=> any,
  getRecommendPlayList: (object) => any,
}

type PageState = {
   isAgree?:Boolean,
   isDisAgree?:Boolean,
   hasVote?:Boolean,
   hasArrive?:Boolean,
   hasGiveUp?:Boolean,
   current: number,
   isOpened?:Boolean,
   disagreeReason:string,
   id:any,  //应聘者id
   name:any,
   description:any,
   currVoteStatus: number,
   
}

@injectPlaySong()
@connect(({
  song
}) => ({
  song: song
}), (dispatch) => ({
  getPlayListDetail (payload) {
    dispatch(getPlayListDetail(payload))
  },
  getSongInfo (object) {
    dispatch(getSongInfo(object))
  },
  updatePlayStatus (object) {
    dispatch(updatePlayStatus(object))
  },
  updateVoteState(voteStatus,userId,itemId){
    dispatch(updateVoteState(voteStatus,userId,itemId))
  },
  getRecommendPlayList (object) {
    dispatch(getRecommendPlayList(object))
  },
  submitDisagreeReason(id,userId,disagreeReason,isagree){
    dispatch( submitDisagreeReason(id,userId,disagreeReason,isagree))
  }
}))

 
class Page extends Component<PageDispatchProps & PageOwnProps & PageStateProps, PageState> {

  config: Config = {
    navigationBarTitleText: '选举详情'
  }

  constructor (props) {
    super(props)
   
    this.state = {
       isAgree:undefined,
       isDisAgree:undefined,
       hasGiveUp:undefined,
       hasVote:false,
       hasArrive:false,
      
       current: 0,
       isOpened:false,
       disagreeReason:"",
       id:undefined,
       name:undefined,
       description:undefined,
       currVoteStatus: -1,
       
    }
    
  }
  private btnAgreeRef = Taro.createRef()
  private btnDisAgreeRef = Taro.createRef()
 
  // sortByNo=()=>{}
  componentWillMount () {
    
    const { id, name ,description,votestatus,rejectReason} = this.$router.params 
    console.log("entering 详情投票状态")
    this.setState({
      id:id,
      name:name,
      description:description,
      currVoteStatus:votestatus,
      disagreeReason:rejectReason,
    })
    if(Number(votestatus)===0){
       this.setState({
          isAgree:true
       })
    } else {
      this.setState({
        isAgree:false
     })
    }
     
    Taro.setNavigationBarTitle({
      // title: name
      title:'投票项目详情'
    })
    // this.props.getPlayListDetail({
    //   id
    // })
  }
  switchTab (value) {
    if (value !== 1) return
    Taro.reLaunch({
      url: '/pages/my/index'
    })
  }

  componentDidMount() {
   
  }
   
  handleChange=(txt)=>{
     console.log("否决原因："+txt.detail.value)
     this.setState({
        disagreeReason: txt.detail.value
     })
  }
  componentDidShow () {
  }
  handleClose=()=>{
     this.setState({
      isOpened:false
     })
  }
  openCommit=()=>{
     
    this.setState({
      isOpened:true
     } )
  }
  handleCancel=()=>{
    this.setState({
      isOpened:false
     })
  }
  handleConfirm() {
    
    console.log("handleConfirm id:"+this.state.id)
    this.props.submitDisagreeReason(this.state.id,  Taro.getStorageSync('openid'), this.state.disagreeReason,"1") 
     
    this.setState({
      isOpened:false,
      isAgree: false,
      currVoteStatus:1, 
     },()=>{
    
      setTimeout(() => {
        this.props.getRecommendPlayList(Taro.getStorageSync('openid' ))
      }, 200);
       
     })
  }
  componentDidHide () { }

  playSong(songId, playStatus) {
    if (playStatus === 0) {
      Taro.navigateTo({
        url: `/pages/songDetail/index?id=${songId}`
      })
    } else {
      Taro.showToast({
        title: '暂无版权',
        icon: 'none'
      })
    }
  } 
  // async onAgreeClick(){
  //   //
  //   await  this.props. updateVoteState(true,Taro.getStorageSync("openid"),this.state.id)
  //   await  this.props.getRecommendPlayList(Taro.getStorageSync('openid' ))
  //   this.setState({
  //     isAgree: true,
  //     currVoteStatus:0, }
  //     ,()=>{
    
  //     setTimeout(() => {
      
  //     }, 200);
     
  //    } )
  // }
  render () {
    const { playListDetailInfo, playListDetailPrivileges, currentSongInfo } = this.props.song
  
    console.log("详情1: "+ JSON.stringify( this.state .description)) 
    console.log("id: "+this.state.id) 
       currItemId=this.state.id
    console.log("当前投票状态: "+ this.state.currVoteStatus)
    let disagreeStyle={}
    console.log("是否同意："+this.state.isAgree)
    if(Number(this.state.currVoteStatus)===-1) {
      disagreeStyle=styles.btnDisAgreeStyleB
    } else if(Number(this.state.currVoteStatus)===0 ){
      disagreeStyle=styles.btnDisAgreeStyleB
    } else if(Number(this.state.currVoteStatus)===1){
      disagreeStyle=styles.btnDisAgreeStyle
    }
    
    // let {isAgree} = this.state
    return (
      // <AtNavBar></AtNavBar>
      <View 
        className={
          classnames({
            playList_container: true,
            hasMusicBox: !!currentSongInfo.name
          })
        }   >
        <CMusic songInfo={ this.props.song } onUpdatePlayStatus={this.props.updatePlayStatus.bind(this)} />
        
        <View className='playList__header--more'>
          <View className='playList__header--more__tag'>
              标签：{this.state.name || '暂无'}
             
          </View>
          <View className='playList__header--more__desc'>
            简介：{this.state.description || '暂无'}
          </View>
          {Number(this.state.currVoteStatus)===1 && (<View className='at-row'>
            {/*  */}
               <text>否决原因:</text><br/>
                {this.state.disagreeReason}
           </View>)}
          
          <View className='at-row'>
          
          <View className='at-col'>
             <Button   type='primary' size='default'  
                disabled={ (Number(this.state.currVoteStatus)!== -1)}
                style={ this.state.isAgree ? styles.btnAgreeStyle : styles.btnAgreeStyleB} 
                onClick={()=>{
                    console.log("判断状态："+  this.state.currVoteStatus )
                   console.log("判断状态："+ !(Number(this.state.currVoteStatus)!== -1))
                  //  Taro.showToast({
                  //    title:"即将返回上一页"
                  //  })
                  this.props. updateVoteState(true,Taro.getStorageSync("openid"),this.state.id)
                  this.setState({
                    isAgree: true,
                    currVoteStatus:0, }
                    ,()=>{
                     
                    setTimeout(() => {
                        this.props.getRecommendPlayList(Taro.getStorageSync('openid' ))
                    }, 200);
                   
                   } )
                }}  >  赞成  </Button>
               </View>
               <View className='at-col'>
             <Button   type='primary' size='default' 
                  disabled={ (Number(this.state.currVoteStatus)!== -1)} 
                style = {disagreeStyle}
                onClick={()=>{
                  this.setState({ 
                      isAgree: false,
                      currVoteStatus:1, 
                   },()=>{
                    
                     this.openCommit()
                    
                   })
                }}  > 反对    </Button>
                    <AtModal   isOpened={this.state.isOpened}
                    closeOnClickOverlay={false}  >
                      <AtModalHeader>否决的原因</AtModalHeader>
                      <AtModalContent>
                        <AtTextarea
                              value={this.state.disagreeReason}
                             onChange={this.handleChange }
                            maxLength={200}
                            placeholder='否决的原因...'
                          />
                      </AtModalContent>
                      <AtModalAction> 
                          <Button onClick={this.handleCancel}>取消</Button> 
                          <Button onClick={this.handleConfirm.bind(this)}>确定</Button> 
                      </AtModalAction>
                    </AtModal>
               </View>
        </View>
         
      
        </View>
     
      
         
      </View>
    )
  }
}

// #region 导出注意
//
// 经过上面的声明后需要将导出的 Taro.Component 子类修改为子类本身的 props 属性
// 这样在使用这个子类时 Ts 才不会提示缺少 JSX 类型参数错误
//
// #endregion

export default Page as ComponentClass
